<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HCMC BUS MAP</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/inputClient.js"></script>
<script type="text/javascript" src="js/algorithm.js"></script>
<script type="text/javascript" src="js/showTextPath.js"></script>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>








<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/ui-darkness/jquery-ui.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>

<link href="dialogshow.css" rel="stylesheet">


<style type="text/css">

	html, body{
			height: 100%;
			margin-left: 10px;
			margin-right: 10px;
	}

	.space {
		height: 10px;
	}

	#khoi {
		position: absolute;
		z-index: 2;
		top: 85px;
		left: 20px;
	}


</style>
<?php
	include '/../mdSta/data.php';
	$data = new Data();
?>
</head>

<body>
	<div>
		<div class="row">
			<div class="col-md-8 text-left">
				<h1>HO CHI MINH CITY BUS MAP</h1>
			</div>
			<div class="col-md-4 text-right" style="margin-top: 20px;">
				<div class="row">
					<div class="col-md-6">
						<button onclick="searchSP()" class="btn btn-success" style="width:100%;">Tìm đường</button>
					</div>
					<div class="col-md-6">
						<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" style="width:100%;">
						  Xem hướng dẫn
						</button>
					</div>
				</div>
				<div class="modal fade text-center" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
				  <div class="modal-dialog">
				    <div class="modal-content">
				      <div class="modal-header">
				        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				        <h4 class="modal-title" id="myModalLabel">Hướng dẫn</h4>
				      </div>
				      <div class="modal-body">
				        <div id="left"></div>
				      </div>
				      <div class="modal-footer">
				        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
				      </div>
				    </div>
				  </div>
				</div>
			</div>
		</div>
		<div class="row">
			<div id="khoi" class="col-md-4 form">
				<?php
				  include '/../dataStation/loadAllStation.php';
				  $station = loadData();
				?>
				<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
				  <div class="panel panel-primary">
				    <div class="panel-heading" role="tab" id="headingOne">
				      <h4 class="panel-title">
				        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
				          Tìm đường
				        </a>
				      </h4>
				    </div>
				    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
				      <div class="panel-body">
				        <div class="form-group" style="margin-bottom: 40px;">
							    <label for="begin" class="col-md-3 control-label">Điểm đầu:</label>
							    <div class="col-md-9">
							      <select id="begin" type="text" style="width:100%" class="form-control">
											<?php
										  		echo $station;
										  	?>
										</select>
							    </div>
							  </div>
							  <div class="space"></div>
							  <div class="form-group" style="margin-bottom: 40px;">
							    <label for="begin" class="col-md-3 control-label">Điểm đến:</label>
							    <div class="col-md-9">
							     <select id="target" type="text" style="width:100%" class="form-control">
										<?php
									  		echo $station;
									  	?>
									</select>
							    </div>
							  </div>
							  <div class="space"></div>
							  <div class="form-group" style="margin-bottom: 40px;">
							  	<label for="begin" class="col-md-3 control-label">Thời gian:</label>
							  	<div class="col-md-9">
							  		<div class="row">
							  			<div class="col-md-6">
							  				<select id="giodi" class="form-control" title="giờ">
											  	<?php
											  	for($i = 5; $i <= 20; $i++){
											  		echo '<option value="'. $i . '">' . $i . '</option>';
											  	}
											  	?>
											  </select>
							  			</div>
							  			<div class="col-md-6">
												<select id="phutdi" class="form-control" title="phút">
											  	<?php
											  	for($i = 0; $i <= 60; $i++){
											  		if($i < 10 && $i%5 == 0){
											  			echo '<option value="'. $i . '">0' . $i . '</option>';
											  		}
											  		else if($i >= 10 && $i%5 == 0){
											  			echo '<option value="'. $i . '">' . $i . '</option>';
											  		}
											  	}
											  	?>
											  </select>
							  			</div>
							  		</div>
							    </div>
							  </div>
							  <div class="space"></div>
							  <div class="form-group" style="margin-bottom: 40px;">
							  	<label for="begin" class="col-md-3 control-label">Độ ưu tiên:</label>
							  	<div class="col-md-9">
							  		<div class="row">
							  			<div class="col-md-4">
							  				<select id="firstPriority" class="form-control">
													<option value="none">1st</option>
													<option value="st">Thời gian</option>
													<option value="sd">Khoảng cách</option>
													<option value="sp">Chuyển tuyến</option>
												</select>
							  			</div>
							  			<div class="col-md-4">
							  				<select id="secondPriority" class="form-control">
													<option value="none">2nd</option>
													<option value="st">Thời gian</option>
													<option value="sd">Khoảng cách</option>
													<option value="sp">Chuyển tuyến</option>
												</select>
							  			</div>
							  			<div class="col-md-4">
							  				<select id="thirdPriority" class="form-control">
													<option value="none">3rd Priority</option>
													<option value="st">Thời gian</option>
													<option value="sd">Khoảng cách</option>
													<option value="sp">Chuyển tuyến</option>
												</select>
							  			</div>
							  		</div>
							    </div>
							  </div>
							  <div class="space"></div>
						    <div class="form-group" style="margin-bottom: 40px;">
							    <label for="begin" class="col-md-3 control-label">Đi bộ:</label>
							    <div class="col-md-9">
							    	<div class="row">
							    		<div class="col-md-4">
							    			<select id="walk" class="form-control">
													<option value="vwalk" selected="select">Có</option>
													<option value="vnowalk">Không</option>
												</select>
							    		</div>
							    		<div class="col-md-4">
							    			<input id="oncewalk" type="number" value="200" class="form-control" title="Bán kính đi bộ"/>
							    		</div>
							    		<div class="col-md-4">
							    			<input id="maxwalk" type="number" value="400" class="form-control" title="Khoảng cách đi bộ tối đa"/>
							    		</div>
							    	</div>
							    </div>
							  </div>
							  <div class="space"></div>
							  <div class="form-group">
							    <label for="begin" class="col-md-3 control-label"></label>
							    <div class="col-md-9">
							    	<button onclick="searchSP()" class="btn btn-success" style="width:100%;">Tìm đường</button>
							    </div>
							  </div>
				      </div>
				    </div>
				  </div>
				  <div class="panel panel-primary">
				    <div class="panel-heading" role="tab" id="headingTwo">
				      <h4 class="panel-title">
				        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
				          Thông số đường đi
				        </a>
				      </h4>
				    </div>
				    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
				      <div class="panel-body">
				        <div class="form-group">
									<div>
										<table class="table table-striped" style="width=100%">
											<thead>
												<tr>
													<th>Tên</th>
													<th>Số liệu</th>
													<th>Đơn vị</th>
												</tr>
											</thead>
											<tbody>
												<tr>
													<td>Thời gian đến</td>
													<td><div id="thoigianden">0</div></td>
													<td></td>
												</tr>
												<tr>
													<td>Tổng quãng đường</td>
													<td><div id="tongquangduong">0</div></td>
													<td>m</td>
												</tr>
												<tr>
													<td>Quãng đường đi bộ</td>
													<td><div id="quangduongdibo">0</div></td>
													<td>m</td>
												</tr>
												<tr>
													<td>Số lần chuyển chuyến</td>
													<td><div id="tongchuyentuyen">0</div></td>
													<td>lần</td>
												</tr>
												<tr>
													<td>Tổng tiền vé</td>
													<td><div id="tongtienve">0</div></td>
													<td>vnd</td>
												</tr>
											</tbody>
										</table>
									</div>
							  </div>
				      </div>
				    </div>
				  </div>
				</div>
			</div>
			<div class="col-md-12">
				<div id="right" style="width: 100%; height: 550px; border: solid black 2px; margin-bottom:20px;"></div>
			</div>
		</div>
	</div>

<!--dialog-->
<div id="dialog" title="Chọn Điểm">
	<div id="listStation"></div>
	<p></p>
	<input id="diemdi" type="submit" value="Điểm Bắt Đầu">
	<input id="diemden" type="submit" value="Điểm Đến">
</div>


</body>
<script type="text/javascript">
	function searchSP()
	{
		initialize();
		var walkcan = [];
		var inputClient = [];
		walkcan = walkCan();
		inputClient = getListInput();
		if(inputClient.length > 0)
		{
			var dNext = <?php echo json_encode($data->resultData('nextS'));?>;
			var dNear = <?php echo json_encode($data->resultData('nearS'));?>;
			setData(dNext, dNear, inputClient, walkcan);
			var resultAlgorithm = shortTestPath();
			if(resultAlgorithm == null)
			{
				alert('Ko tim thay duong di');
			}
			else
			{
				var dS = <?php echo json_encode($data->resultData('station'));?>;
				var add_khoi = showTextPath(dS, resultAlgorithm);
				travelNode(add_khoi,null);
				addMarkerBeginAndTarget('target');
    			addMarkerBeginAndTarget('begin');
    			console.log(routeList)
    			for (var i = 0; i < routeList.length; i++) {
    				$('#' + routeList[i]).click(function(){
    					var key = $(this).val();
    					initialize();
    					travelNode(add_khoi, key);
    					addMarkerBeginAndTarget('target');
    					addMarkerBeginAndTarget('begin');
    				})
    			}
			}
		}
	}

</script>
<script type="text/javascript">
	$('#walk').change(function(e) {
        checkPriority('walk');
    });
	$('#firstPriority').change(function(e) {
        checkPriority('fp');
    });
    $('#secondPriority').change(function(e) {
        checkPriority('sp');
    });
    $('#thirdPriority').change(function(e) {
        checkPriority('tp');
    });
    $('#begin').change(function(e) {
        addMarkerBeginAndTarget('begin');
    });
    $('#target').change(function(e) {
        addMarkerBeginAndTarget('target');
    });
</script>

<script type="text/javascript" src="js/googlemap.js"></script>

</html>
